<template>
  <div class="map">
    <div class="search">
      <div class="left">
        <span>关联度：</span>
        <select>
          <option>6</option>
        </select>
        <span>支持度：</span>
        <select>
          <option>6</option>
        </select>
        <input>
        <button>查询</button>
        <button>挖掘分析</button>
      </div>
    </div>
    <div class="tag">
      <button @click="drawLine">甘草</button>
      <button type="gray">医院</button>
      <button type="gray">病症</button>
      <button type="gray">咳嗽</button>
      <button type="gray">医家</button>
      <button type="gray">医籍</button>
    </div>

    <h4>网络拓展图</h4>
    <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
    <div class="table_info">
      <p>关键词：甘草</p>
      <p>词类：中药</p>
      <p>影响症状：</p>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="症状"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="关联度">
        </el-table-column>
        <el-table-column
          prop="number"
          label="频次">
        </el-table-column>
      </el-table>
    </div>
    <div id="myChart1" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '1',
          name: '背寒',
          address: '9',
          number:'12'
        }, {
          date: '2',
          name: '背直',
          address: '7',
          number:'12'
        }, {
          date: '3',
          name: '恶心',
          address: '3',
          number:'12'
        }, {
          date: '4',
          name: '额热',
          address: '3',
          number:'12'
        }, {
          date: '5',
          name: '疔肿',
          address: '3',
          number:'12'
        }]
      }
    },
    mounted(){
      this.drawLine();
      this.echartsline();
    },
    methods: {
      echartsline(){
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
        myChart1.setOption({
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'直接访问',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
            }
          ]
        })
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let data = []
        // 绘制图表
        myChart.setOption (
          {
            title: {
              text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
              }
            },
            legend: {
              x: "center",
              show: false,
//              data: ["", "战友", '亲戚']
            },
            series: [

              {
                type: 'graph',
                layout: 'force',
                symbolSize: 60,
                focusNodeAdjacency: true,
                roam: true,
                categories: [{
                  itemStyle: {
                    normal: {
                      color: "#009800",
                    }
                  }
                }, {
                  itemStyle: {
                    normal: {
                      color: "#4592FF",
                    }
                  }
                }, {
                  itemStyle: {
                    normal: {
                      color: "#009800",
                    }
                  }
                }],
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 12
                    },
                  }
                },
                force: {
                  repulsion: 1000
                },
                edgeSymbolSize: [4, 50],
                edgeLabel: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 10
                    },
                    formatter: "{c}"
                  }
                },
                data: [{
                  name: '甘草',
                  draggable: true,
                  symbolSize: 100,
                  itemStyle: {
                    normal: {
                      color: "#ff3a3a",
                    }
                  }
                }, {
                  name: '病症',
                  category: 1,
                  draggable: true,
                  symbolSize: 70,
                  itemStyle: {
                    normal: {
                      color: "#3a84ff",
                    }
                  }
                }, {
                  name: '医家',
                  category: 1,
                  draggable: true,
                  symbolSize: 40,
                  itemStyle: {
                    normal: {
                      color: "#8d3aff",
                    }
                  }
                }, {
                  name: '医籍',
                  category: 1,
                  draggable: true,
                  symbolSize: 43,
                  itemStyle: {
                    normal: {
                      color: "#3adcff",
                    }
                  }
                }, {
                  name: '症状',
                  category: 1,
                  draggable: true,
                  symbolSize: 76,
                  itemStyle: {
                    normal: {
                      color: "#3aff68",
                    }
                  }
                }, {
                  name: '病因',
                  category: 1,
                  draggable: true,
                  symbolSize: 88,
                  itemStyle: {
                    normal: {
                      color: "#a6b31b",
                    }
                  }
                }, {
                  name: '方剂',
                  category: 1,
                  draggable: true,
                  symbolSize: 96,
                  itemStyle: {
                    normal: {
                      color: "#ffc53a",
                    }
                  }
                }, {
                  name: '制法',
                  category: 1,
                  draggable: true,
                  symbolSize: 46,
                  itemStyle: {
                    normal: {
                      color: "#ff803a",
                    }
                  }
                }, {
                  name: '症候',
                  category: 1,
                  draggable: true,
                  symbolSize: 33,
                  itemStyle: {
                    normal: {
                      color: "#1bb36a",
                    }
                  }
                }, {
                  name: '70',
                  category: 1,
                  draggable: true,
                  symbolSize: 70,
                  itemStyle: {
                    normal: {
                      color: "#3a84ff",
                    }
                  }
                }, {
                  name: '40',
                  category: 1,
                  draggable: true,
                  symbolSize: 40,
                  itemStyle: {
                    normal: {
                      color: "#8d3aff",
                    }
                  }
                }, {
                  name: '43',
                  category: 1,
                  draggable: true,
                  symbolSize: 43,
                  itemStyle: {
                    normal: {
                      color: "#3adcff",
                    }
                  }
                }, {
                  name: '76',
                  category: 1,
                  draggable: true,
                  symbolSize: 76,
                  itemStyle: {
                    normal: {
                      color: "#3aff68",
                    }
                  }
                }, {
                  name: '88',
                  category: 1,
                  draggable: true,
                  symbolSize: 88,
                  itemStyle: {
                    normal: {
                      color: "#a6b31b",
                    }
                  }
                }, {
                  name: '96',
                  category: 1,
                  draggable: true,
                  symbolSize: 96,
                  itemStyle: {
                    normal: {
                      color: "#ffc53a",
                    }
                  }
                }, {
                  name: '46',
                  category: 1,
                  draggable: true,
                  symbolSize: 46,
                  itemStyle: {
                    normal: {
                      color: "#ff803a",
                    }
                  }
                }, {
                  name: '33',
                  category: 1,
                  draggable: true,
                  symbolSize: 33,
                  itemStyle: {
                    normal: {
                      color: "#1bb36a",
                    }
                  }
                }],
                links: [{
                  source: 0,
                  target: 1,
                  category: 0,
                  value: ''
                }, {
                  source: 0,
                  target: 2,
                  value: ''
                }, {
                  source: 0,
                  target: 3,
                  value: ''
                }, {
                  source: 0,
                  target: 4,
                  value: ''
                }, {
                  source: 0,
                  target: 5,
                  value: ''
                }, {
                  source: 0,
                  target: 6,
                  value: ''
                }, {
                  source: 0,
                  target: 7,
                  value: ''
                }, {
                  source: 0,
                  target: 8,
                  value: ''
                }, {
                  source: 1,
                  target: 9,
                  value: ''
                }, {
                  source: 2,
                  target: 10,
                  value: ''
                }, {
                  source: 3,
                  target: 11,
                  value: ''
                }, {
                  source: 4,
                  target: 12,
                  value: ''
                }, {
                  source: 5,
                  target: 13,
                  value: ''
                }, {
                  source: 6,
                  target: 14,
                  value: ''
                }, {
                  source: 7,
                  target: 15,
                  value: ''
                }, {
                  source: 8,
                  target: 16,
                  value: ''
                }],
                lineStyle: {
                  normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0
                  }
                }
              }
            ]
          }
        )
        myChart.on('click', function (parmas) {
            myChart.setOption({
              series: [{
                name: 'pie',
                data: [{
                  name: '甘草',
                  draggable: true,
                  symbolSize: 100,
                  itemStyle: {
                    normal: {
                      color: "#ff3a3a",
                    }
                  }
                }, {
                  name: '病症',
                  category: 1,
                  draggable: true,
                  symbolSize: 70,
                  itemStyle: {
                    normal: {
                      color: "#3a84ff",
                    }
                  }
                }, {
                  name: '医家',
                  category: 1,
                  draggable: true,
                  symbolSize: 40,
                  itemStyle: {
                    normal: {
                      color: "#8d3aff",
                    }
                  }
                }, {
                  name: '医籍',
                  category: 1,
                  draggable: true,
                  symbolSize: 43,
                  itemStyle: {
                    normal: {
                      color: "#3adcff",
                    }
                  }
                }, {
                  name: '症状',
                  category: 1,
                  draggable: true,
                  symbolSize: 76,
                  itemStyle: {
                    normal: {
                      color: "#3aff68",
                    }
                  }
                }, {
                  name: '病因',
                  category: 1,
                  draggable: true,
                  symbolSize: 88,
                  itemStyle: {
                    normal: {
                      color: "#a6b31b",
                    }
                  }
                }, {
                  name: '方剂',
                  category: 1,
                  draggable: true,
                  symbolSize: 96,
                  itemStyle: {
                    normal: {
                      color: "#ffc53a",
                    }
                  }
                }, {
                  name: '制法',
                  category: 1,
                  draggable: true,
                  symbolSize: 46,
                  itemStyle: {
                    normal: {
                      color: "#ff803a",
                    }
                  }
                }, {
                  name: '症候',
                  category: 1,
                  draggable: true,
                  symbolSize: 33,
                  itemStyle: {
                    normal: {
                      color: "#1bb36a",
                    }
                  }
                }, {
                  name: '70',
                  category: 1,
                  draggable: true,
                  symbolSize: 70,
                  itemStyle: {
                    normal: {
                      color: "#3a84ff",
                    }
                  }
                }, {
                  name: '40',
                  category: 1,
                  draggable: true,
                  symbolSize: 40,
                  itemStyle: {
                    normal: {
                      color: "#8d3aff",
                    }
                  }
                }, {
                  name: '43',
                  category: 1,
                  draggable: true,
                  symbolSize: 43,
                  itemStyle: {
                    normal: {
                      color: "#3adcff",
                    }
                  }
                }, {
                  name: '76',
                  category: 1,
                  draggable: true,
                  symbolSize: 76,
                  itemStyle: {
                    normal: {
                      color: "#3aff68",
                    }
                  }
                }, {
                  name: '88',
                  category: 1,
                  draggable: true,
                  symbolSize: 88,
                  itemStyle: {
                    normal: {
                      color: "#a6b31b",
                    }
                  }
                }, {
                  name: '96',
                  category: 1,
                  draggable: true,
                  symbolSize: 96,
                  itemStyle: {
                    normal: {
                      color: "#ffc53a",
                    }
                  }
                }, {
                  name: '46',
                  category: 1,
                  draggable: true,
                  symbolSize: 46,
                  itemStyle: {
                    normal: {
                      color: "#ff803a",
                    }
                  }
                }, {
                  name: '33',
                  category: 1,
                  draggable: true,
                  symbolSize: 33,
                  itemStyle: {
                    normal: {
                      color: "#1bb36a",
                    }
                  }
                }, {
                  name: '咳嗽',
                  category: 2,
                  draggable: true,
                  symbolSize: 50,
                  itemStyle: {
                    normal: {
                      color: "#a6b31b",
                    }
                  }
                }, {
                  name: '气喘',
                  category: 2,
                  draggable: true,
                  symbolSize: 50,
                  itemStyle: {
                    normal: {
                      color: "#ff803a",
                    }
                  }
                }, {
                  name: '发烧',
                  category: 2,
                  draggable: true,
                  symbolSize: 50,
                  itemStyle: {
                    normal: {
                      color: "#ffc53a",
                    }
                  }
                }, {
                  name: '肥胖',
                  category: 2,
                  draggable: true,
                  symbolSize: 50,
                  itemStyle: {
                    normal: {
                      color: "#3adcff",
                    }
                  }
                }],
                links: [{
                  source: 0,
                  target: 1,
                  category: 0,
                  value: ''
                }, {
                  source: 0,
                  target: 2,
                  value: ''
                }, {
                  source: 0,
                  target: 3,
                  value: ''
                }, {
                  source: 0,
                  target: 4,
                  value: ''
                }, {
                  source: 0,
                  target: 5,
                  value: ''
                }, {
                  source: 0,
                  target: 6,
                  value: ''
                }, {
                  source: 0,
                  target: 7,
                  value: ''
                }, {
                  source: 0,
                  target: 8,
                  value: ''
                }, {
                  source: 1,
                  target: 9,
                  value: ''
                }, {
                  source: 2,
                  target: 10,
                  value: ''
                }, {
                  source: 3,
                  target: 11,
                  value: ''
                }, {
                  source: 4,
                  target: 12,
                  value: ''
                }, {
                  source: 5,
                  target: 13,
                  value: ''
                }, {
                  source: 6,
                  target: 14,
                  value: ''
                }, {
                  source: 7,
                  target: 15,
                  value: ''
                }, {
                  source: 8,
                  target: 16,
                  value: ''
                }, {
                  source: 9,
                  target: 17,
                  value: ''
                }, {
                  source: 9,
                  target: 18,
                  value: ''
                }, {
                  source: 9,
                  target: 19,
                  value: ''
                }, {
                  source: 9,
                  target: 20,
                  value: ''
                }],
                lineStyle: {
                  normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0
                  }
                }
              }]
            });
        });
      }
    }
  }
</script>
<style>
  .map{
    width:60%;
    margin:auto;
    margin-top: 30px;
  }
  .map th{
    text-align: center;
  }
  .map .search .left{
    width:100%;
  }
  .map .search select{
    width:100px;
  }
  .table_info{
    border-top: solid 1px #d3d3d3;
    padding-top: 10px;
  }
  .table_info p{
    text-align: left;
    margin-left: 10px;
  }
  .map .tag{
    margin-top: 10px;
  }
</style>
